<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/4/26
  Time: 23:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String name = request.getParameter("name");
%>
<%--<html>--%>
  <%--<head>--%>
    <%--<title>$Title$</title>--%>
  <%--</head>--%>
  <%--<body>--%>
      <%--<div class="all-middle" >--%>

        <%--<audio class="audio" controls="controls" >--%>
          <%--<source src="/fmdksxf/src/MP3/<%=name%>" type="audio/mpeg">--%>
          <%--Your browser does not support the audio element.--%>
        <%--</audio>--%>


      <%--</div>--%>
  <%--</body>--%>
<%--</html>--%>

<%--<style type="text/css">--%>
  <%--html,body,div{--%>
    <%--margin:0;--%>
    <%--padding:0;--%>
    <%--height:100%;--%>
    <%--position:relative;--%>
  <%--}--%>
  <%--.all-middle{--%>
    <%--width:500px;--%>
    <%--height:50px;--%>
    <%--top:50%;--%>
    <%--margin:-100px auto 0;--%>
  <%--}--%>
  <%--.audio{--%>
    <%--width:500px;--%>
    <%--height:50px;--%>
  <%--}--%>
 <%--</style>--%>
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <meta charset="utf-8">
  <title>GMU Demos</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/player.css" />
  <link rel="stylesheet" type="text/css" href="css/gmu.css" />
  <link rel="stylesheet" type="text/css" href="css/demo.css" />
  <style type="text/css">
    body {
      background: #505050;
    }
  </style>
  <script type="text/javascript" src="js/zepto.js"></script>
  <script type="text/javascript" src="js/gmu.js"></script>
  <script type="text/javascript" src="js/event.js"></script>
  <script type="text/javascript" src="js/widgets.js"></script>
  <script type="text/javascript" src="js/player.js"></script>
</head>
<body>
<%--<hearder class="hearder">--%>
  <%--<h3>播放器</h3>--%>
<%--</hearder>--%>
<div id="">

  <div id="music_box">
    <ul id="MusicList">
      <li class="active">
        <div class="music_info">
          <%--<div class="music_overlay" style="background-image:url(image/audio-1.jpg)" data-src="/fmdksxf/src/MP3/<%=name%>" song-name="Let it go" singe="《冰雪奇缘》"></div>--%>
          <div class="music_overlay" style="background-image:url(image/audio-1.jpg)" data-src="<%=name%>" song-name="Let it go" singe="《冰雪奇缘》"></div>
        </div>
      </li>

      <%--<li>--%>
        <%--<div class="music_info">--%>
          <%--<div class="music_overlay" style="background-image:url(audio/audio-2.jpg)" data-src="2" song-name="GreenPeace Ska" singe="板砖乐队《音渡神游》"></div>--%>
        <%--</div>--%>
      <%--</li>--%>
    </ul>
  </div>


  <!-- 当前播放的音乐 -->
  <div class="nowPlayer">
    <p class="songName" id="CurrentPlayName">准备播放</p>
  </div>
  <!-- 进度条状态 -->
  <div class="ProcessControl">
    <div id="progressbar"></div>
    <div class="SongTime l">00:00</div>
    <div class="SongTime r">00:00</div>
  </div>
  <!-- <div class="toolsBar">
      <div><i class="icon-heart"></i><span>favourite</span></div>
      <div><i class="icon-shuffle"></i><span>shuffle</span></div>
      <div><i class="icon-loop-alt1"></i><span>repeat</span></div>
  </div> -->
  <!-- 播放器控制组件 -->
  <div class="PlayControls">
    <!-- 播放按钮 -->
    <div id="play"><i class="icon-play"></i></div>
    <!-- 暂停按钮 -->
    <div id="pause"><i class="icon-pause"></i></div>
    <!-- 下一曲 -->
    <div id="next"><i class="icon-next"></i></div>
    <!-- 上一曲 -->
    <div id="prev"><i class="icon-previous"></i></div>
  </div>

  <!-- 播放器 -->
  <audio id="playMusic" data-src="" data-src-flag=""></audio>
</div>
<script>
  //创建横向组件
  $('#progressbar').progressbar();

</script>
</body>
</html>